<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .clock {
            width: 300px;
            height: 300px;
            margin: 200px auto;
        }
        .circle {
            width: 300px;
            height: 300px;
            border-radius: 150px;
            background: #8f8f8f;
            position: relative;
        }
        .content {
            width: 280px;
            height: 280px;
            border-radius: 140px;
            background: white;
            position: absolute;
            left: 10px;
            top: 10px;
        }
        .angle {
            width: 8px;
            height: 16px;
            background-color: #8f8f8f;
            position: absolute;
            left: 50%;
            margin-left: -4px;
            transform-origin: 4px 140px;
        }
         .angle:nth-of-type(1) {
            transform:  rotate(30deg);
        }
        .angle:nth-of-type(2) {
            transform: rotate(60deg);
        }
        .angle:nth-of-type(3) {
            transform: rotate(90deg);
        }
        .angle:nth-of-type(4) {
            transform: rotate(120deg);
        }
        .angle:nth-of-type(5) {
            transform: rotate(150deg);
        }
        .angle:nth-of-type(6) {
            transform: rotate(180deg);
        }
        .angle:nth-of-type(7) {
            transform: rotate(210deg);
        }
        .angle:nth-of-type(8) {
            transform: rotate(240deg);
        }
        .angle:nth-of-type(9) {
            transform: rotate(270deg);
        }
        .angle:nth-of-type(10) {
            transform: rotate(300deg);
        }
        .angle:nth-of-type(11) {
            transform: rotate(330deg);
        }
        .angle:nth-of-type(12) {
            transform: rotate(360deg);
        }

        .pointers {
            width: 2px;
            height: 110px;
            position: absolute;
            left: 50%;
            top: 50%;
            position: relative;
            transform: translate(-50%,-100%);
            /* background-color: red; */
        }
        .minutes {
            position: absolute;
            width: 4px;
            height: 80px;
            border-radius: 2px;
            top: 30px;
            background-color: yellow;
            transform-origin: 2px 80px;
            transform: rotate(20deg);
            animation: minutes 360s linear 0s infinite;
        } 
        .seconds {
            width: 2px;
            height: 110px;
            border-radius: 1px;
            position: absolute;
            background-color:blue;
            transform-origin: 1px 110px;
            transform: rotate(30deg);
            animation: seconds 6s linear 0s infinite;
        }
        .hours {
            position: absolute;
            width: 6px;
            height: 60px;
            border-radius: 3px;
            top: 50px;
            background-color: red;
            transform-origin: 3px 60px;
            transform: rotate(10deg);
            animation: seconds 21600s linear 0s infinite;
        } 
        .pot {
            width: 16px;
            height: 16px;
            position: absolute;
            border-radius: 8px;
            left: -4px; 
            top: 102px;
            background-color: purple;
        }
        @keyframes seconds {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes minutes {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }
        @keyframes hours {
            0% {
                transform: rotate(0deg);
            }
            100% {
                transform: rotate(360deg);
            }
        }

    </style>
</head>
<body>
    <div class="clock"> 
        <div class="circle">
                <div class="content">
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                        <div class="angle"></div>
                </div>
                <div class="pointers">
                    <div class="hours"></div>
                    <div class="minutes"></div>
                    <div class="seconds"></div>
                    <div class="pot"></div>
                </div>
        </div>  
    </div>
    
</body>
</html>